<template>
  <view class="container">
    <view
      class="title"
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 0;
        padding-left: 20rpx;
        margin-top: 40rpx;
        margin-bottom: 40rpx;
      "
    >
      <view class="left" style="display: flex; align-items: center">
        <text style="font-weight: bold; font-size: 34rpx; color: #111111">
          {{ deskInfo.name }}
        </text>
        <text style="font-weight: bold; font-size: 22rpx; color: #666666">
          ({{ orderInfo.person }}人)
        </text>
      </view>
      <view class="right" style="font-size: 22rpx; color: #666666">
        <text @click="onMenberClick">会员</text>
        <text
          style="margin-left: 31rpx; margin-right: 22rpx"
          v-on:click="onOptClick"
          >操作</text
        >
      </view>
    </view>

    <view
      class="info"
      style="
        width: 710rpx;
        margin-left: 20rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
        border-radius: 18rpx;
        padding: 0 21rpx;
        border-bottom: 1px solid #ededed;
      "
    >
      <view
        style="
          font-weight: bold;
          font-size: 30rpx;
          color: #111111;
          height: 88rpx;
          line-height: 88rpx;
        "
        >菜品信息</view
      >
      <view class="dish-list">
        <view
          v-for="(food, index) of orderDetail"
          :key="index"
          style="height: 90rpx; display: flex; align-items: center"
        >
          <view
            class="name"
            style="
              width: 450rpx;
              font-weight: 500;
              font-size: 26rpx;
              color: #111111;
            "
          >
            {{ food.name }}{{ food | getSpec }}
          </view>
          <view style="display: flex; align-items: center; height: 48rpx">
            x{{ food.quantity }}
          </view>
          <view
            class="price"
            style="
              text-align: right;
              font-weight: 500;
              font-size: 22rpx;
              color: #111111;
              flex: 1;
            "
            >￥{{ food.realPrice }}</view
          >
        </view>
      </view>
      <view
        class="sum-box"
        style="
          height: 115rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        "
      >
        <text style="font-weight: 500; font-size: 22rpx; color: #111111">
          共{{
            orderDetail.reduce((p, item) => {
              return p + item.quantity;
            }, 0)
          }}件商品，合计</text
        ><text
          style="
            font-weight: bold;
            font-size: 20rpx;
            color: #d5283d;
            margin-left: 12rpx;
          "
        >
          ￥</text
        ><text style="font-weight: bold; font-size: 30rpx; color: #d5283d">{{
          orderDetail
            .reduce((p, item) => {
              return p + item.realAmount;
            }, 0)
            .toFixed(2)
        }}</text>
      </view>
    </view>

    <view
      class="o-i"
      style="
        margin-top: 20rpx;
        margin-left: 20rpx;
        width: 710rpx;
        height: 314rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
        border-radius: 18rpx;
        padding: 0 21rpx;
      "
    >
      <view
        class="t"
        style="
          width: 710rpx;
          height: 88rpx;
          font-weight: bold;
          font-size: 30rpx;
          color: #111111;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ededed;
        "
      >
        订单信息
      </view>
      <view
        class="inf"
        style="
          padding: 0 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 225rpx;
        "
      >
        <view
          class="it"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view
            class="l"
            style="font-weight: 500; font-size: 24rpx; color: #666666"
            >创建人</view
          >
          <view
            class="r"
            style="font-weight: 500; font-size: 24rpx; color: #111111"
          ></view>
        </view>
        <view
          class="it"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view
            class="l"
            style="font-weight: 500; font-size: 24rpx; color: #666666"
            >开台时间</view
          >
          <view
            class="r"
            style="font-weight: 500; font-size: 24rpx; color: #111111"
            >{{ orderInfo.createTime | formatDate }}</view
          >
        </view>
        <view
          class="it"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view
            class="l"
            style="font-weight: 500; font-size: 24rpx; color: #666666"
            >下单时间</view
          >
          <view
            class="r"
            style="font-weight: 500; font-size: 24rpx; color: #111111"
            >{{ orderInfo.orderDate | formatDate }}</view
          >
        </view>
      </view>
    </view>

    <view class="bottom-btn">
      <view
        style="
          height: 75rpx;
          padding-left: 30rpx;
          display: flex;
          align-self: center;
        "
      >
      </view>
      <view
        style="
          margin-left: 30rpx;
          width: 690rpx;
          height: 90rpx;
          background: linear-gradient(135deg, #fbc960, #f0b947);
          box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
          border-radius: 45rpx;
          overflow: hidden;
          display: flex;
          align-items: center;
        "
      >
        <view
          class="l"
          style="
            width: 345rpx;
            height: 86rpx;
            background: #ffffff;
            border-radius: 43rpx 0 0 43rpx;
            border: 2rpx solid #f0b947;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 30rpx;
            color: #111111;
          "
          v-on:click="onAddFood"
          >去加菜</view
        >
        <view
          class="r"
          style="
            width: 345rpx;
            height: 86rpx;
            border-radius: 43rpx 0rpx 0rpx 43rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 30rpx;
            color: #111111;
          "
          v-on:click="onGoToPay"
          >确认
        </view>
      </view>
    </view>

    <!-- 操作 弹窗 -->
    <u-popup
      :show="optShow"
      @close="optShow = false"
      @open="optShow = true"
      mode="top"
    >
      <view
        class="layout"
        style="
          width: 710rpx;
          margin-left: 20rpx;
          margin-top: 80rpx;
          height: 425rpx;
          background: #ffffff;
          box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
          border-radius: 18rpx 0rpx 18rpx 18rpx;
        "
      >
        333
      </view>
    </u-popup>
  </view>
</template>

<script>
import { orderReverse } from "../../../common/modules/orderAssistan";
import {
  uGetStorageSync,
  uNavigateToWithParams,
  uNavigateTo,
} from "../../../utils/uniUtils";

export default {
  async onLoad(opt) {
    this.deskId = opt.deskid;
    this.orderId = opt.orderid;
    this.getOrderList();
    this.cart = uGetStorageSync("order" + this.orderId) || [];
    let that = this;

    uni.$on("chooseMember", async function (data) {
      console.log("监听到事件来自 chooseMember ，携带参数 msg 为：", data);
      const res = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 122,
        data: { orderId: that.orderId, memberId: data.id },
        sign: uGetStorageSync("orderSign"),
      });
      await that.getOrderList();
    });
  },

  data() {
    return {
      checkboxValue: [],
      remark: "",
      deskId: 0,
      orderId: 0,
      cart: [],
      productModalVisible: false,
      cartPopupShow: false,
      showSearch: false,
      materialsOtherData: {},

      deskInfo: {},
      orderInfo: [],
      showKtPopup: false,
      person: 0,
      orderDetail: [],

      cart: [],
      orderInfo: null,
      deskInfo: null,
      optShow: false,
    };
  },
  filters: {
    formatDate(str) {
      let date = new Date(str);
      return `${date.getFullYear()}年${
        date.getMonth() + 1
      }月${date.getDate()}日 ${date.getHours()}时${(
        date.getMinutes() + ""
      ).padStart(2, "0")}分${(date.getSeconds() + "").padStart(2, "0")}秒`;
    },
    getSpec(food) {
      let arr = [];
      arr.push(food.specName);
      if (food.feedTitle) {
        arr.push(food.feedTitle);
      }
      if (food.taskTitle) {
        arr.push(food.taskTitle);
      }
      return `(${arr.join(",")})`;
    },
  },
  methods: {
    // 获取点菜清单
    async getOrderList() {
      const result = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 113,
        data: {
          orderId: this.orderId,
          deskId: parseInt(this.deskId),
        },
        sign: uGetStorageSync("orderSign"),
      });
      if (result.status == 0) {
        const { desk, master, detail } = result.data;
        console.log("result", { desk, master, detail });
        this.deskInfo = desk;
        this.orderInfo = master;
        this.orderDetail = detail;
      }
    },

    onAddFood: function () {
      uNavigateToWithParams("/pages/workbench/orderingAssistant/classify", {
        deskid: this.deskId,
        orderid: this.orderid,
      });
    },
    onGoToPay: function () {},
    onMenberClick() {
      uNavigateTo("/pages/workbench/orderingAssistant/member");
    },
    onOptClick: function () {
      this.optShow = true;
    },
    // methods放上面
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 236rpx;
  overflow: scroll;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 226rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(4, 0, 0, 0.04);
  border-radius: 0rpx;
}
</style>
